<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingBottom: '14px' }">
      <template #title>
        {{ $t('dataAnalysis.contentPublishRatio') }}
      </template>

      <!-- 左中右布局 -->
      <div class="lcr-layout">
        <!-- 左侧统计（恢复原样式类名） -->
        <div class="lcr-left info-left">
          <div class="info-item">
            <div class="icon-bg">
              <img
                class="leftIcon"
                src="/src/assets/images/index/jiaohuanji.png"
                alt=""
              />
            </div>
            <div class="info-label">交换机</div>
            <div class="info-value">{{
              carouselItems[activeIndex].lefta1
            }}</div>
          </div>
          <div class="info-item">
            <div class="icon-bg">
              <img
                class="leftIcon"
                src="/src/assets/images/index/dianshi.png"
                alt=""
            /></div>
            <div class="info-label">电视</div>
            <div class="info-value">{{
              carouselItems[activeIndex].lefta2
            }}</div>
          </div>
          <div class="info-item">
            <div class="icon-bg">
              <img
                class="leftIcon"
                src="/src/assets/images/index/dayinji.png"
                alt=""
            /></div>
            <div class="info-label">打印机</div>
            <div class="info-value">{{
              carouselItems[activeIndex].lefta3
            }}</div>
          </div>
        </div>

        <!-- 中间轮播 -->
        <div class="lcr-center">
          <el-carousel
            ref="carouselRef"
            class="lcr-carousel"
            height="100%"
            indicator-position="none"
            arrow="never"
            @change="onCarouselChange"
          >
            <el-carousel-item v-for="(item, idx) in carouselItems" :key="idx">
              <div class="carousel-slide">
                <img class="slide-img" :src="item.img" alt="" />
              </div>
            </el-carousel-item>
          </el-carousel>

          <!-- 叠加在轮播上的底部标签与左右切换，不占空间 -->
          <div class="carousel-footer">
            <span class="nav-arrow" @click="prevSlide">‹</span>
            <span class="footer-label">{{
              carouselItems[activeIndex].name
            }}</span>
            <span class="nav-arrow" @click="nextSlide">›</span>
          </div>
        </div>

        <!-- 右侧状态块 -->
        <div class="lcr-right">
          <div
            class="room-status"
            v-for="item in carouselItems[activeIndex].powerList"
            :key="item.name"
          >
            <span class="dot dot-green" />
            <div class="status-text">
              <div class="status-title">{{ item.name }}</div>
              <div class="status-meta">
                温度 {{ item.temperature }} 湿度 {{ item.humidity }} 烟感：{{
                  item.smokeDetector
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ToolTipFormatterParams } from '@/types/echarts';
  import useLoading from '@/hooks/loading';
  import {
    queryContentPublish,
    ContentPublishRecord,
  } from '@/api/visualization';
  import useChartOption from '@/hooks/chart-option';

  // 轮播数据（后续可替换为接口返回）
  import centerImg30 from '@/assets/images/banner/banner30.png';
  import centerImg31 from '@/assets/images/banner/banner31.png';
  import centerImg32 from '@/assets/images/banner/banner32.png';
  import centerImg33 from '@/assets/images/banner/banner33.png';
  import centerImg34 from '@/assets/images/banner/banner34.png';

  const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
    return items
      .map(
        (el) => `<div class="content-panel">
    <p>
      <span style="background-color: ${
        el.color
      }" class="tooltip-item-icon"></span>
      <span>
      ${el.seriesName}
      </span>
    </p>
    <span class="tooltip-value">
      ${Number(el.value).toLocaleString()}
    </span>
  </div>`
      )
      .join('');
  };

  const { loading, setLoading } = useLoading(true);
  const xAxis = ref<string[]>([]);
  const textChartsData = ref<number[]>([]);
  const imgChartsData = ref<number[]>([]);
  const videoChartsData = ref<number[]>([]);
  const { chartOption } = useChartOption((isDark) => {
    return {
      grid: {
        left: '4%',
        right: 0,
        top: '20',
        bottom: '60',
      },
      legend: {
        bottom: 0,
        icon: 'circle',
        textStyle: {
          color: '#4E5969',
        },
      },
      xAxis: {
        type: 'category',
        data: xAxis.value,
        axisLine: {
          lineStyle: {
            color: isDark ? '#3f3f3f' : '#A9AEB8',
          },
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#86909C',
          },
        },
        axisLabel: {
          color: '#86909C',
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#86909C',
          formatter(value: number, idx: number) {
            if (idx === 0) return `${value}`;
            return `${value / 1000}k`;
          },
        },
        splitLine: {
          lineStyle: {
            color: isDark ? '#3F3F3F' : '#E5E6EB',
          },
        },
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        formatter(params) {
          const [firstElement] = params as ToolTipFormatterParams[];
          return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
          </div>`;
        },
        className: 'echarts-tooltip-diy',
      },
      series: [
        {
          name: '纯文本',
          data: textChartsData.value,
          stack: 'one',
          type: 'bar',
          barWidth: 16,
          color: isDark ? '#4A7FF7' : '#246EFF',
        },
        {
          name: '图文类',
          data: imgChartsData.value,
          stack: 'one',
          type: 'bar',
          color: isDark ? '#085FEF' : '#00B2FF',
        },
        {
          name: '视频类',
          data: videoChartsData.value,
          stack: 'one',
          type: 'bar',
          color: isDark ? '#01349F' : '#81E2FF',
          itemStyle: {
            borderRadius: 2,
          },
        },
      ],
    };
  });
  const fetchData = async () => {
    setLoading(true);
    try {
      const { data: chartData } = await queryContentPublish();
      xAxis.value = chartData[0].x;
      chartData.forEach((el: ContentPublishRecord) => {
        if (el.name === '纯文本') {
          textChartsData.value = el.y;
        } else if (el.name === '图文类') {
          imgChartsData.value = el.y;
        }
        videoChartsData.value = el.y;
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData();

  const carouselItems = ref([
    {
      name: '沙阳1号厂房',
      img: centerImg30,
      lefta1: 11,
      lefta2: 3,
      lefta3: 12,
      powerList: [
        {
          name: '1号配电间',
          temperature: '25℃',
          humidity: '45%',
          smokeDetector: '正常',
        },
        {
          name: '2号配电间',
          temperature: '24℃',
          humidity: '45%',
          smokeDetector: '正常',
        },
      ],
    },
    {
      name: '沙阳2号厂房',
      img: centerImg31,
      lefta1: 22,
      lefta2: 1,
      lefta3: 39,
      powerList: [
        {
          name: '1号配电间',
          temperature: '25℃',
          humidity: '45%',
          smokeDetector: '正常',
        },
        {
          name: '2号配电间',
          temperature: '25℃',
          humidity: '45%',
          smokeDetector: '正常',
        },
        {
          name: '3号配电间',
          temperature: '25℃',
          humidity: '45%',
          smokeDetector: '正常',
        },
      ],
    },
    {
      name: '沙阳3号厂房',
      img: centerImg32,
      lefta1: 1,
      lefta2: 2,
      lefta3: 3,
      powerList: [
        {
          name: '1号配电间',
          temperature: '25℃',
          humidity: '45%',
          smokeDetector: '正常',
        },
      ],
    },
  ]);

  const activeIndex = ref(0);
  const carouselRef = ref();

  const onCarouselChange = (current: number) => {
    activeIndex.value = current;
  };

  const prevSlide = () => {
    carouselRef.value?.prev();
  };
  const nextSlide = () => {
    carouselRef.value?.next();
  };
</script>

<style scoped lang="less">
  .lcr-layout {
    height: 300px; /* 总高度与右侧对齐 */
    display: flex;
    // grid-template-columns: 240px 1fr 280px;
    gap: 16px;
    align-items: start;
  }

  /* 恢复左侧原来的样式 */
  .info-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }
  .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(
        to right,
        #a3c6f7 0%,
        rgba(163, 198, 247, 0) 100%
      ),
      #fff;
    padding: 10px 10px;
    border-radius: 16px;
  }
  .icon-bg {
    width: 32px;
    height: 32px;
    background: #f5f6fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    font-size: 18px;
  }
  .info-label {
    color: #888;
    font-size: 15px;
  }
  .info-value {
    margin-left: auto;
    font-weight: bold;
    color: #222;
    font-size: 18px;
  }
  .lcr-center {
    position: relative;
    width: 100%;
    height: 100%; /* 充满父容器高度 */
    display: flex;
    flex-direction: column;
    min-width: 240px; /* 防止小屏幕时变形 */
    flex: 1;
    border-radius: 14px;
    overflow: hidden;
  }
  .lcr-carousel {
    width: 100%;
    height: 100%; /* 轮播图最大化 */
  }
  .carousel-slide {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center; /* 图片垂直居中 */
    justify-content: center; /* 图片水平居中 */
    overflow: hidden;
    // border-radius: 12px;
    background: linear-gradient(180deg, #eaf2ff 0%, #f5faff 100%);
  }
  .slide-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持比例完整显示 */
    display: block;
  }
  .carousel-footer {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
  }
  .nav-arrow {
    cursor: pointer;
    color: #4d8aff;
    font-size: 20px;
    user-select: none;
  }
  .footer-label {
    color: #1f2329;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px; /* 可以根据需要调整最大宽度 */
  }

  /* 右侧状态块 */
  .lcr-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }
  .room-status {
    display: flex;
    align-items: center;
    background: #eff3f7;
    padding: 12px;
    border-radius: 10px;
  }
  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .dot-green {
    background-color: #22c55e;
  }
  .status-title {
    font-weight: 600;
    margin-bottom: 4px;
  }
  .status-meta {
    color: #6b7280;
    font-size: 13px;
  }
  .leftIcon {
    width: 24px;
    height: 24px;
  }
</style>
